import React, { memo, useState } from 'react';
import { useDispatch } from 'react-redux'
import { IconRefresh } from '@arco-design/web-react/icon';

import { TwitterPicker } from 'react-color';
import { Card, Link, Slider } from '@arco-design/web-react';

export default memo(function Theme() {
  const [color, setColor] = useState();
  const [value, setValue] = useState(70);
  const dispatch = useDispatch();
  const onChange = e => {
    setColor(e.hex);
    dispatch({ type: 'theme', data:e.hex });
  };
  const sliderChange = e => {
    setValue(e);
    dispatch({ type: 'Transparency', data:e });
  };

  return (
    <Card title='主题色' extra={<Link>请选择主题色并全局应用</Link>}>
      <TwitterPicker onChange={e => onChange(e)} color={color} />
      <br />
      <Link>重置</Link>
      <IconRefresh
        style={{ cursor: 'pointer', fontSize: '15px' }}
        onClick={e => dispatch({ type: 'theme', data:'#1f2430' })}
      />
      <br />
      <Link>全局透明度</Link>
      <Slider
        value={value}
        onChange={e => {
          sliderChange(e);
        }}
        step={10}
        style={{ width: 200 }}
      />
    </Card>
  );
});
